<template>
	<div id="box" style="width: 1200px;margin: 0 auto;margin-top: -20px;">
		<NavMenu></NavMenu>
		<div class="body-Box">
			<div class="commodity">
				<img :src="goodsDetails.goodsImgUrl" alt="">
			</div>
			<div class="commodity-size">
				<ul>
					<li class="title-size">{{ goodsDetails.name }}</li>
					<li class="xq-size">Java入门经典，销售12年，80万Java程序员选择，210集教学视频+211个应用示例+151个编程训练+94个综合训练+在线答疑，Java核心技术</li>
					<li><a href="">明日科技</a> 著<a href="">明日科技</a> 编</li>
					<li class="jg-box">
						<span class="bk-size">博 客 价：</span>
						<span class="jg-num">￥{{ goodsDetails.price}}</span>
							<el-popover
								class="btn-jjtz"
								placement="bottom"
								width="200"
								trigger="click"
								content="以成功为你预定降价通知">
								<el-button slot="reference">降价通知</el-button>
							</el-popover>
							<span class="pj-size">
								累计评价
								<br>
								<el-link :underline="false">1万+</el-link>
							</span>
					</li>
					<li>
						<span class="zl-size">重量： 0.95KG</span>
					</li>
					<li>
						<span class="zjfs-size">增值服务 
							<el-popover
								placement="bottom"
								width="300"
								trigger="hover"
								content="免费提供图书回收服务，完成回收获得环保奖励金。">
								<el-button slot="reference">助力环保，传递知识，旧书换新</el-button>
							</el-popover>
						</span>
					</li>
					<li class="dz-xz">
						<span class="ps-size">配送至</span>
						<el-cascader
						style="margin-left: 25px;"
						v-model="value"
						placement="bottom"
						:options="options"
						@change="handleChange"></el-cascader>
					</li>
					<li class="fw-box">
						<span>服务支持 
							<el-popover
								placement="bottom"
								width="300"
								trigger="hover"
								content="此商品支持7天价保，下单7天内前台发生降价可以申请价格保护">
								<el-button slot="reference">七天价保</el-button>
							</el-popover>
							<el-popover
								placement="bottom"
								width="300"
								trigger="hover"
								content="签收15天内因商品性能故障换货的，上门取件时直接换新。">
								<el-button slot="reference">上门换新</el-button>
							</el-popover>
							<el-popover
								placement="bottom"
								width="300"
								trigger="hover"
								content="闪电退款是为优质会员提供的快速退款服务">
								<el-button slot="reference">闪电退款</el-button>
							</el-popover>
							<el-popover
								placement="bottom"
								width="300"
								trigger="hover"
								content=" 签收后72小时内发现商品破损问题，提供售后服务。">
								<el-button slot="reference">上门换新</el-button>
							</el-popover>
						</span>
					</li>
					<li class="xl-box">
						<el-input-number style="width: 100px;" size="mini" v-model="num4"></el-input-number>
						<el-row>
							<el-button style="margin-left: 30px;" type="danger"><i class="el-icon-shopping-cart-2" @click="addShoppingTrolley(item)"></i> 加入购物车</el-button>
							<el-button type="danger" plain><i class="el-icon-shopping-bag-2"></i> 立即购买</el-button>
						</el-row>
					</li>
				</ul>
			</div>
		</div>
		<div>
			<PopularRecommendation :goods="goods" @load="load"></PopularRecommendation>
		</div>
		<div class="sp-img-box">
			<p class="rqdp-sok">
				<span class="rqdp-size">
				商品介绍
				</span>
			</p>
			<ul class="js-box">
				<li>出版社： 清华大学出版社</li>
				<li>ISBN： 9787302581260</li>
				<li>版次： 6</li>
				<li>商品编码： 13284888</li>
				<li>品牌： 清华大学</li>
				<li>包装：平装</li>
				<li>丛书名： 软件开发视频大讲堂</li>
				<li>开本：16开</li>
				<li>出版时间： 2021-07-01</li>
				<li>用纸： 胶版纸</li>
				<li>页数： 492</li>
				<li>字数：844000</li>
				<li>正版语种： 中文</li>
			</ul>
			<div class="sfjs-img-box">
				<span class="spjs-size">
				产品特色
				</span>
				<div>
					<img src="@/assets/shangpin/xjjs-img.jpg" alt="">
				</div>
				<div class="bjtj-size">
					<span class="spjs-size2">
					编辑推荐
					</span>
					<!-- <br> -->
					<div class="p-box">
						<p class="tj-size">
							“软件开发视频大讲堂”丛书是清华社计算机专业基础类零售图书最畅销的品牌之一。
							<br>
							（1）丛书累计销售400万册，深受广大开发者喜爱。
							<br>
							（2）4本荣获“全行业优畅销书”奖，1本荣获清华社“专业畅销书”一等奖。
							<br>
							（3）绝大多数品种在“全国计算机零售图书排行榜”同品种排行中名列前茅。
							<br>
							（4）实用、易懂、资源丰富，被数百所高校选为专业课教材。
							<br>
							《Java从入门到精通（第6版）》以长更新稳定版本JDK 11为基础，图书特点如下。
							<br>
							1. 学通Java只需要4步：基础知识→核心技术→高级应用→项目实战，符合认知规律。
							<br>
							2. 210集教学微课视频+强化实战训练+在线答疑，适合自学。
							<br>
							3. 211个应用示例+151个编程训练+94个综合训练+2个项目案例，学习1小时，训练10小时，练出编程习惯，你就能成为Java高手。
							<br>
							4. 赠送强大的Java开发资源库资源，助你夯实基础，精准，有效，速练。
							<br>
							（1）实例资源库+源码资源库：732个实例及源码详细分析，多读源码，快速成长。
							<br>
							（2）模块资源库：15个经典模块开发过程完整展现，拿来改改就能用。
							<br>
							（3）项目资源库：15个企业项目开发过程的完整展现，反复揣摩，触类旁通。
							<br>
							（4）面试资源库：369道企业面试真题+面试技巧，合理职业规划，快速转岗就业。
							<br>
							（5）测试题库系统：616道能力测试题，由易到难，准确判断自己的真实水平，更有针对性地学习。
						</p>
					</div>
					<span class="spjs-size2">
					作者简介
					</span>
					<div class="p-box">
						<p class="tj-size">
							明日科技，全称是吉林省明日科技有限公司，是一家专业从事软件开发、教育培训以及软件开发教育资源整合的高科技公司，其编写的教材非常注重选取软件开发中的必需、常用内容，同时也很注重内容的易学、方便性以及相关知识的拓展性，深受读者喜爱。其教材多次荣获“全行业优秀畅销品种”“全国高校出版社优秀畅销书”等奖项，多个品种长期位居同类图书销售排行榜的前列。
						</p>
					</div>
					<span class="spjs-size2">
						内容简介
					</span>
					<div class="p-box">
						<p class="tj-size">
							《Java从入门到精通（第6版）》从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细讲解了使用Java语言进行程序开发需要掌握的知识。全书分为23章，内容包括初识Java，熟悉Eclipse开发工具，Java语言基础，流程控制，数组，类和对象，继承、多态、抽象类与接口，包和内部类，异常处理，字符串，常用类库，集合类，枚举类型与泛型，lambda表达式与流处理，I/O（输入/输出），反射与注释，数据库操作，Swing程序设计，Java绘图，多线程，网络通信，奔跑吧小恐龙，MR人脸识别打卡系统。书中所有知识都结合具体实例进行讲解，涉及的程序代码都给出了详细的注释，可以使读者轻松领会Java程序开发的精髓，快速提高开发技能。
						</p>
					</div>
				</div>
			</div>
			<!-- <PopularRecommendation></PopularRecommendation> -->
			<div class="sppj-box">
				<div class="sppj-size-box">
					<span>
						商品评价
					</span>
				</div>
				<div class="hp-box">
					<div class="hp-size">
						<p class="hpd-size">好评度</p>
						
						<p class="hpd-num">97%</p>
					</div>
					<ul>
						<li>
							<el-row>
								<el-button round>品质一流(33)</el-button>
							</el-row>
						</li>
						<li>
							<el-row>
								<el-button round>印刷上乘(14)</el-button>
							</el-row>
						</li>
						<li>
							<el-row>
								<el-button round>优美详细(8)</el-button>
							</el-row>
						</li>
						<li>
							<el-row>
								<el-button round>图文清晰(5)</el-button>
							</el-row>
						</li>
						<li>
							<el-row>
								<el-button round>简单清晰(5)</el-button>
							</el-row>
						</li>
						<li>
							<el-row>
								<el-button round>完好无损(4)</el-button>
							</el-row>
						</li>
						<li>
							<el-row>
								<el-button round>适用人群广(2)</el-button>
							</el-row>
						</li>
						<li>
							<el-row>
								<el-button round>纸张精良(2)</el-button>
							</el-row>
						</li>
						<li>
							<el-row>
								<el-button round>经典之作(2)</el-button>
							</el-row>
						</li>
					</ul>
				</div>
				<div class="yh-hp-box">
					<UserCommentsVue  v-for="item in list" :id="item.id" :key="item.id"></UserCommentsVue>
				</div>
			</div>
		</div>
		<bottomNavVue></bottomNavVue>
	</div>
</template>

<script>
import NavMenu from '@/components/Details/NavMenu.vue';
import PopularRecommendation from '@/components/Details/PopularRecommendation.vue';
import UserCommentsVue from '@/components/Details/UserComments.vue';
import bottomNavVue from '@/components/bottom-nav.vue';

export default {
	name: 'FrontendVue2ProductDetails',
	components:{
		NavMenu,
		PopularRecommendation,
		UserCommentsVue,
		bottomNavVue,
	},
	data() {
      return {
				list:[1,1,1,1,1,1,1,1],
				num4: 1,
        value: [],
        options: [{
          value: 'zhinan',
          label: '湖南',
          children: [{
            value: 'shejiyuanze',
            label: '长沙',
            children: [{
              value: 'yizhi',
              label: '雨花区'
            }, {
              value: 'fankui',
              label: '长沙县'
            }, {
              value: 'xiaolv',
              label: '芙蓉区'
            }, {
              value: 'kekong',
              label: '岳麓区'
            }]
          }, {
            value: 'daohang',
            label: '湘西',
            children: [{
              value: 'cexiangdaohang',
              label: '凤凰县'
            }, {
              value: 'dingbudaohang',
              label: '吉首市'
            }]
          },
					{
            value: 'daohang',
            label: '岳阳',
            children: [{
              value: 'cexiangdaohang',
              label: '华容县'
            }, {
              value: 'dingbudaohang',
              label: '平江县'
            }]
          }
				]
        }, 
				{
          value: 'zujian',
          label: '北京',
          children: [{
            value: 'basic',
            label: '朝阳区',
            children: [{
              value: 'layout',
              label: '八里庄街道'
            }, {
              value: 'color',
              label: '大屯街道'
            }, {
              value: 'typography',
              label: '东湖街道'
            }]
          }, {
            value: 'form',
            label: '海定区',
            children: [{
              value: 'radio',
              label: '八里庄街道'
            }, {
              value: 'checkbox',
              label: '东升地区'
            }, {
              value: 'input',
              label: '万柳地区'
            }]
          }, {
            value: 'data',
            label: '大兴区',
            children: [{
              value: 'table',
              label: '博兴街道'
            }, {
              value: 'tag',
              label: '观音寺街道'
            }]
          }, {
            value: 'notice',
            label: '顺义区',
            children: [{
              value: 'alert',
              label: '观音寺街道'
            }, {
              value: 'loading',
              label: '空港街道'
            }]
          }, {
            value: 'navigation',
            label: '东域区',
            children: [{
              value: 'menu',
              label: '北新桥街道'
            }, {
              value: 'tabs',
              label: '长沟镇'
            }]
          }, {
            value: 'others',
            label: '房山区',
            children: [{
              value: 'dialog',
              label: '石楼镇'
            }, {
              value: 'tooltip',
              label: '青龙湖镇'
            }]
          }]
        }, {
          value: 'hb',
          label: '湖北',
          children: [{
            value: 'axure',
            label: '孝感市',
						children: [{
              value: 'dialog',
              label: '大悟县'
            }, {
              value: 'tooltip',
              label: '云梦县'
            }]
          }, {
            value: 'sketch',
            label: '武汉市',
						children: [{
              value: 'dialog',
              label: '蔡甸区'
            }, {
              value: 'tooltip',
              label: '黄陂区'
            }]
          }, {
            value: 'jiaohu',
            label: '鄂州市',
						children: [{
              value: 'dialog',
              label: '华容区'
            }, {
              value: 'tooltip',
              label: '梁子湖区'
            }]
          }]
        }],
				goodsDetails: {},
				goods:[],
      };
    },
    methods: {
			addShoppingTrolley(item){
      if(this.user.id){
        let flag = false;
        let valitem ;
        this.$store.state.shoppingList.forEach( (val,index)=>{
          if(item.id == val.id){
            this.$store.state.shoppingList[index].quantity++;
            valitem =  this.$store.state.shoppingList[index];
            flag =true;
          }
        })

        if(flag === false){
          this.successShopping();
          this.$store.state.shoppingNum++;
          item.quantity =1;
          //向数据库添加新数据 无id
          let userShopping = {
            userId : this.user.id,
            goods : item.id,
            quantity: item.quantity
          }
          this.request.post("/shoppingCart",userShopping).then(res =>{
            this.userShoppingCart()
          })

          this.$store.state.shoppingList.push(item);


        }else {
          this.repetitionOpen(valitem)
        }

      }else {
        this.$notify({
          title: '请先登录',
          message: '登录后方可加入购物车',
          type: 'warning',
          offset: 100
        });
      }



    },
      handleChange(value) {
      },
			toTop() {
      document.documentElement.scrollTop = 0;
    },
    load(id){
      //查看商品数据
      this.request.get("/goods/front/page",{
        params:{
					pageNum: 0,
          pageSize: 20,
          name: this.name,
        }
      }).then(res => {
        if (res.code === "200") {
					this.goods = res.data.data.slice(0,6)
					this.goodsDetails = res.data.data.filter(item=>{
						return item.id ==id;
					})[0]
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
	created(){
		this.load(this.$route.query.id);

	}

};
</script>

<style lang="less" scoped>
	#box{
		background-color: rgb(253, 253, 253);
		width: 100%;
		height: 100%;
		.body-Box{
			width: 100%;
			height:500px;
			// background-color: aquamarine;
			display: flex;
			// align-items: center;
			.commodity{
				width: 400px;
				height: 400px;
				// background-color: cornflowerblue;
				// border: 1px solid rgb(148, 148, 148);
				img{
					width: 100%;
				}
			}
			.commodity-size{
				width: 600px;
				height: 400px;
				// background-color: darkcyan;
				margin-left: 50px;
			}
		}
	}
	ul li{
		margin-bottom: 15px;
		display: flex;
	}
	.title-size{
		font-size: 20px;
		font-weight: bolder;
		color: gray;
	}
	.xq-size{
		font-size: 14px;
		color: rgba(255, 0, 0, 0.829);
	}
	.jg-box{
		width: 600px;
		height: 50px;
		// background-color: rgba(128, 128, 128, 0.13);
		display: flex;
		align-items: center;
	}

	.jg-num{
		font-size: 25px;
		color: rgba(255, 0, 0, 0.849);
	}
	.btn-jjtz{
		margin-left: 25px;
		color:skyblue;
	}
	.pj-size{
		// margin: 0 20px 0 260px;
	}
	.el-button--default{
		border: none;
		// background: #efefef;
		color: cornflowerblue;
		font-size: 14px;
	}
	.dz-xz{
		height: 50px;
		// background: aqua;
		display: flex;
		align-items: center;
	}
	.ps-size{
		color: rgba(128, 128, 128, 0.822);
	}
	.fw-box{
		padding-bottom: 36px;
		border-bottom:1px solid rgba(128, 128, 128, 0.678) ;
	}
	li span{
		color: rgba(128, 128, 128, 0.822);
	}
	.xl-box{
		display: flex;
		align-items: center;
	}
	.el-button--danger {
		width: 150px;
		height: 60px;
		font-size: 20px;
	}
	
	.sp-img-box{
		width: 1200px;
		// height: 300px;
		// margin-top: 50px;

		.sfjs-img-box{
			width: 800px;
			margin: 0 auto;
			padding-bottom: 30px;
			border: 1px solid gray;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			background-color: rgba(128, 128, 128, 0.24);
			// img{
			// 	// margin-top: 20px;
			// }
		}
		.rqdp-sok{
			padding: 10px 15px 15px 0px;
			border-bottom: 3px solid #f56c6c;
		}
		.rqdp-size{
			background-color: #f56c6c;
			padding: 11px 15px 16px 15px;
			color: white;
		}
	}
	.js-box{
		display: flex;
		flex-wrap: wrap;
		li{
			width: 260px;
			margin: 10px 20px 10px 20px;
		}
	}
	// .spjs-p{
	// 	height: 10px;
	// 	border-bottom: 5px solid #f56c6c;
	// 	background-color: aqua;
	// }
	.spjs-size{
		background-color: #f56c6c;
		padding: 20px 25px 20px 25px;
		color: white;
		margin: 0 auto;
		font-size: 18px;
		font-weight: bolder;
		margin: 20px 0px;
	}
	.bjtj-size{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.tj-size{
		margin-top:50px;
		margin-left: 30px;
		color: #6b6b6b;
	}
	.spjs-size2{
		background-color: #f56c6c;
		padding: 20px 25px 20px 25px;
		color: white;
		margin: 0 auto;
		font-size: 18px;
		font-weight: bolder;
		margin-top: 40px;
	}
	.p-box{
		width: 750px;
		border-top: 3px solid #f56c6c;
	}
	.gd-gd{
		width: 50px;
		height: 1000px;
		position: fixed;
		// float: left;
		margin-left: 1200px; ;
		display: flex;
		align-items: center;
	}
	.el-tooltip{
		margin-left: 20px;
		background-color: cornflowerblue;
	}
	.el-icon-arrow-up{
		color: white;
	}
.sppj-box{
	width: 1200px;
	height: 1500px;
	background-color: #efefef;

	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin:50px 0 ;
}
.sppj-size-box{
	width: 1200px;
	height: 50px;
	display: flex;
	align-items: center;
	background-color: #6b6b6b7e;
	margin-bottom: 30px;
	span{
		color: white;
		font-size: 18px;
		margin-left: 20px;
		font-weight: bolder;
	}
}
.hp-box{
	width: 1200px;
	height: 150px;
	// background-color: #f56c6c;
	display: flex;
	flex-wrap:nowrap;
	margin-bottom: 50px;
	.hp-size{
		width: 200px;
		height: 150px;
		// background-color: aqua;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		.hpd-size{
			// width: 200px;
			font-size: 20px;
		}
		.hpd-num{
			font-size: 60px;
			padding: 15px;
			color: #f56c6c;
			font-weight: bolder;
		}
	}
	ul{
		width: 1000px;
		// background-color: chartreuse;
		display: flex;
		flex-wrap: wrap;
		
		li{
			margin: 23px 30px;
		}
	}
}
.yh-hp-box{
	// background-color: #6b6b6b;
	width: 1200px;
	height: 150px;
}
</style>